<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn">获取电影列表</button>
    <ul id="ul"></ul>
    <script>
      let btn = document.getElementById('btn');
      let ul = document.getElementById('ul');
      btn.addEventListener('click', () => {
        // 朝后端发一个请求，获取到需要的数据
        let xhr = new XMLHttpRequest(); // 创建了一个ajax实例

        xhr.open(
          'GET',
          'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList',
          true
        );
        xhr.send();
        xhr.onreadystatechange = () => {
          // 检测请求的每个阶段
          if (xhr.readyState == 4 && xhr.status == 200) {
            console.log(JSON.parse(xhr.responseText));
            const movieList = JSON.parse(xhr.responseText)?.movieList;
            for (let i = 0; i < movieList.length; i++) {
              const li = document.createElement('li');
              li.innerText = `${movieList[i].nm} -- ${movieList[i].star}`;
              ul.appendChild(li);
            }
          }
        };
      });
    </script>
  </body>
</html>
